<template>
	<view class="m-icon" :class="{'text' : text}" @click="click">
		<view class="flex-start flex-warp-nowarp" :style="{color:color}">
			<i-icon :size="iconSize" :name="name"></i-icon>
			<text class="text-content" v-if="text" :style="{fontSize:textSize,color:textColor}">{{ text }}</text>
		</view>
	</view>
</template>

<script>
	export default {
		name:"m-icon",
		props: ['name','size','color','text','textSize','textColor'],
		data() {
			return {
				iconSize : this.size || '14px'
			};
		},
		computed: {
	
		},
		methods:{
			click(){
				this.$emit('click');
			}
		}
	}
</script>

<style>
	.m-icon{
		display: inline-block;
	}
	.m-icon.text .text-content{
		margin-left: 5px;
	}
	.i-icon{
		display: block;
		color: inherit!important;
	}
</style>